<template>
  <div class="login">
    <el-row class="login-main">

      <el-col class="login-box">
        <h2 class="login-title">欢迎登录</h2>
        <el-form ref="form"
                 class="myform"
                 :model="form"
                 label-position="left"
                 label-width="80px">
          <el-form-item label="用户名"
                        prop="username">
            <el-input name="username"
                      clearable
                      v-model="form.username"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="登录密码"
                        prop="password">
            <el-input type="password"
                      show-password
                      name="password"
                      v-model="form.password"
                      placeholder="请输入登录密码"></el-input>
          </el-form-item>

          <el-col style="margin-top:15px;">
            <el-button class="login-btn"
                       type="primary"
                       block
                       @click="submitForm()">登录</el-button>
          </el-col>
          <el-col style="margin-top:15px;"
                  class="">
            <el-button class="login-btn"
                       type="danger"
                       block
                       @click="resetForm()">重置</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { default as apilogin } from '../apis/list';
export default {
    name: 'login',
    data() {
        return {
            form: {
                // username: '',
                // password: '',
            },
            // rules: {
            //     phone: [
            //         { required: true, message: '请输入手机号码', trigger: 'blur' },
            //         {
            //             validator: function (rule, value, callback) {
            //                 if (reg.phone.test(value)) {
            //                     callback();
            //                 } else {
            //                     callback(new Error('手机号码格式不正确'));
            //                 }
            //             },
            //             trigger: 'blur',
            //         },

            //     ],
            //     password: [
            //         { required: true, message: '请输入登陆密码', trigger: 'blur' },
            //         {
            //             validator: function (rule, value, callback) {
            //                 if (reg.pwd.test(value)) {
            //                     callback();
            //                 } else {
            //                     callback(new Error('密码必须为6-16的数字+字母组合'));
            //                 }
            //             },
            //             trigger: 'blur',
            //         },
            //     ],
            // },
        };
    },
    methods: {
        ...apilogin,
        resetForm() {
            this.$refs.form.resetFields();
        },
        submitForm(value) {
            // var that = this;
            // axios
            //     .post(
            //         `http://hololabs.cn:8002/api/toLogin?username=${this.form.username}&password=${this.form.password}`,
            //         {
            //             withCredentials: true,
            //         }
            //     )
            //     .then(function (res) {
            //         that.$router.push({
            //             path: '/list',
            //         });
            //     })
            //     .catch(function (res) {
            //         console.log(res);
            //     });
            console.log(value);
            // this.login(value).then(res => {
            //     console.log(res);
            //     this.$router.push({
            //         path: '/list',
            //     });
            // });
            // this.$refs.form.validate(valid => {
            //     if (valid) {
            //         console.log(this.form);
            //         this.$ajax.loginaction(this.form).then(res => {
            //             if (res.data.code == 200) {
            //                 localStorage.setItem('phone', this.form.phone);
            //                 sessionStorage.setItem('token', res.data.token);
            //                 this.changeUserinfo(null);
            //                 this.$router.push({ name: 'main' });
            //             }
            //         });
            //     } else {
            //         this.$message.error('校验失败,请先核对信息');
            //     }
            // });
        },
    },
    mounted() {
        // this.$axios.get("/admin/test")
        // .then(res=>{
        // })
        // if (localStorage.getItem('phone')) {
        //     this.form = { ...this.form, phone: localStorage.getItem('phone') };
        // }
    },
};
</script>


<style lang="scss" >
// @import '../assets/dark.scss';
.login {
    width: 100%;
    height: 937px;
    background-color: #1b232e;
    // background-image:#4f5e74;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background-position: 0 0;
    // overflow: hidden;
    // position: relative;
    // animation: bgmove 8s 0s linear alternate both infinite;
}

@keyframes bgmove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 30% 0;
    }
}
.login-main {
    width: 100%;
    height: 100%;
    position: relative;
}

.login-box {
    width: 500px;
    height: 360px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.login-title {
    text-align: center;
    font-size: 30px;
    color: #fff;
    margin-top: 20px;
}
.myform {
    padding: 20px;
    .el-form-item__label {
        color: #fff;
    }
    .el-input__inner {
        background: transparent;
        color: #fff;
    }
    .login-btn {
        margin-left: 40%;
    }
}
</style>